﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
    <div id="test3" class="demo-transfer"></div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>显示搜索框</legend>
    </fieldset>


    <div id="transferDiv" class="demo-transfer"></div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>

    <script src="/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
    <script>
        layui.use(['transfer', 'layer', 'util'], function(){
          var $ = layui.$;
          transfer = layui.transfer;
          layer = layui.layer;
          util = layui.util;
          form = layui.form;

          var roleId = window.location.search.substring(4);

          $.ajax({
              url:"/Role/GetMenu?roleId="+roleId,
              type:"get",
              success:function(res){
                  console.log(res);
                  console.log(res.data.options);
                  if(res.isSuccess){
                      transfer.render({
                        elem: '#transferDiv'
                        ,data: res.data.options
                        ,title: ['备选用户', '已选用户']
                        ,showSearch: true
                        ,id: 'transfer1' //定义索引
                        ,value:res.data.bindMenuIds
                      });
                  }
              }
          })
           form.on('submit(saveBtn)', function (data) {
               //拿到角色id
               var roleId = window.location.search.substring(4);
               //获得右侧数据
               var getData = transfer.getData('transfer1');
               //获取用户id数组
               var menuIds = [];
               for(var i = 0;i < getData.length;i++){
                   menuIds.push(getData[i].value);
               }
               //发起异步请求获取用户的备选数据
               $.ajax({
                    url:'/Role/BindMenu',
                    type:'post',
                    data:{
                        roleId:roleId,
                        menuIds:menuIds
                    },
                    success:function(res){
                        if(res.isSuccess){
                            layer.msg(res.msg);
                        }
                    }
               });
                return false;
            });
        });
    </script>

</body>
</html>